<script lang="ts" setup>
import { ref, onMounted } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
const main = ref() // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(
  () => {
    init()
  }
)
function init() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(main.value);
  // 指定图表的配置项和数据
  var option = {
    // 提示框
    tooltip: {
      trigger: "axis", //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
      axisPointer: {
        type: "cross" //十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
      }
    },
    // grid 组件离容器右侧的距离。
    // grid: {
    //   right: "15%"
    // },
    toolbox: {
      feature: {
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    xAxis: {
      type: "category",
      axisTick: {
        length: 5, //坐标轴刻度的长度
        alignWithLabel: true //坐标轴刻度的长度
      },
      axisLabel: {
        interval: 0 //0 强制显示所有标签
      },
      data: [
        {
          value: "2022-10-11",
          textStyle: {
            fontSize: 8
          }
        },
        {
          value: "2022-10-12",
          textStyle: {
            fontSize: 8
          }
        },
        {
          value: "2022-10-13",
          textStyle: {
            fontSize: 8
          }
        },
        {
          value: "2022-10-14",
          textStyle: {
            fontSize: 8
          }
        },
        {
          value: "2022-10-15",
          textStyle: {
            fontSize: 8
          }
        },
        {
          value: "2022-10-16",
          textStyle: {
            fontSize: 8
          }
        },
        {
          value: "2022-10-17",
          textStyle: {
            fontSize: 8
          }
        }
      ]
    },
    yAxis: [
      {
        // 坐标轴类型----数值轴
        type: "value",
        name: "销售金额(元)",
        position: "right",
        interval: 400,
        max: 2000,
        nameTextStyle: {
          color: "#1ba9ba",
          fontSize: 11
        },
        // 在多个 y 轴为数值轴的时候，可以开启该配置项自动对齐刻度。只对'value'和'log'类型的轴有效。
        alignTicks: true,
        axisLine: {
          // 是否显示坐标轴轴线。
          show: false
        },
        axisLabel: {
          // 使用字符串模板，模板变量为刻度默认标签 {value}
          formatter: "{value}"
        }
      },
      {
        type: "value",
        name: "售票数量(张)",
        position: "left",
        interval: 20,
        max: 100,
        nameTextStyle: {
          color: "#1ba9ba",
          fontSize: 11
        },
        alignTicks: true
      }
    ],
    series: [
      {
        name: "售票量",
        type: "bar", //----柱形图
        color: "#de799b",
        barMaxWidth: 15,
        // 使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用。
        yAxisIndex: 1,
        data: [22, 17, 30, 19, 62, 80, 61]
      },
      {
        name: "销售额",
        type: "line",
        symbol: "circle", // 标记的图形
        symbolSize: 11,
        smooth: true, //是否平滑曲线显示
        color: "#1ba9ba",
        lineStyle: {
          width: 3 //强制Swiper的宽度(px)，当你的Swiper在隐藏状态下初始化时用得上。这个参数会使自适应失效。可设置为undefined使这个参数无效。
        },
        yAxisIndex: 0,
        data: [550, 820, 750, 820, 1550, 1750, 1900],
        markLine: {
          data: [{ type: "average", name: "Avg" }]
        }
      }
    ]
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>

<template>
  <div class="tit">近一周销售量</div>
  <div style="margin-left: 210px;">
    <p><span></span> 售票量</p>
    <p><span style="background-color: #1ba9ba;"></span> 销售额</p>
  </div>
  <div ref="main" style="width: 100%;height: 100%;">
  
  </div>
</template>

<style scoped>
.tit{
  margin: 20px 20px 14px 20px;
  width: 96px;
	height: 16px;
	font-family: SourceHanSansCN-Medium;
	font-size: 16px;
	font-weight: normal;
	font-stretch: normal;
	line-height: 16px;
	letter-spacing: 0px;
	color: #1ba9ba;
}
span{
  width: 8px;
	height: 8px;
  display: inline-block;
	background-color: #de799b;
	border-radius: 8px;
}
p{
  float: left;
  margin-right: 20px;
	font-size: 12px;
	color: #303849;
}
</style>